<template>
  <zz-dialog
    title = '环境监测阈值设置'
    :visible = showDialog
    confirmVal='提交'
    @confirm="submit"
    :reset = true
    @close="close">
    <div class="dialog-box">
      <div style="width: 550px; height: 450px;" v-bar>
        <div>
          <div class="pm25 item-box">
            <div class="title">PM2.5阈值</div>
            <table>
              <tr>
                <th>预警值</th>
                <td><input v-validation="{required: true, query: 'PMTWOPOINTFIVEWARN', numberDot: true}" v-model="PMTWOPOINTFIVEWARN"></td>
              </tr>
              <tr>
                <th>报警值</th>
                <td><input v-validation="{required: true, query: 'PMTWOPOINTFIVEALARM', numberDot: true}" v-model="PMTWOPOINTFIVEALARM"></td>
              </tr>
            </table>
          </div>
          <div class="pm10 item-box">
            <div class="title">PM10阈值</div>
            <table>
              <tr>
                <th>预警值</th>
                <td><input v-validation="{required: true, query: 'PMTENWARN', numberDot: true}" v-model="PMTENWARN"></td>
              </tr>
              <tr>
                <th>报警值</th>
                <td><input v-validation="{required: true, query: 'PMTENALARM', numberDot: true}" v-model="PMTENALARM"></td>
              </tr>
            </table>
          </div>
          <div class="tsp item-box">
            <div class="title">TSP阈值</div>
            <table>
              <tr>
                <th>预警值</th>
                <td><input v-validation="{required: true, query: 'TSPWARN', numberDot: true}" v-model="TSPWARN"></td>
              </tr>
              <tr>
                <th>报警值</th>
                <td><input v-validation="{required: true, query: 'TSPALARM', numberDot: true}" v-model="TSPALARM"></td>
              </tr>
            </table>
          </div>
          <div class="advt item-box">
            <div class="title">温度阈值</div>
            <table>
              <tr>
                <th>预警值</th>
                <td><input v-validation="{required: true, query: 'TEPWARN', numberDot: true}" v-model="TEPWARN"></td>
              </tr>
              <tr>
                <th>报警值</th>
                <td><input v-validation="{required: true, query: 'TEPALARM', numberDot: true}" v-model="TEPALARM"></td>
              </tr>
            </table>
          </div>
          <div class="nosiy item-box">
            <div class="title">噪音阈值</div>
            <table>
              <tr>
                <th>预警值</th>
                <td><input v-validation="{required: true, query: 'NOISEWARN', numberDot: true}" v-model="NOISEWARN"></td>
              </tr>
              <tr>
                <th>报警值(昼)</th>
                <td><input v-validation="{required: true, query: 'NOISEDAYALARM', numberDot: true}" v-model="NOISEDAYALARM"></td>
              </tr>
              <tr>
                <th>报警值(夜)</th>
                <td><input v-validation="{required: true, query: 'NOISENIGHTALARM', numberDot: true}" v-model="NOISENIGHTALARM"></td>
              </tr>
            </table>
          </div>
          <div class="wind item-box">
            <div class="title">风速阈值</div>
            <table>
              <tr>
                <th>预警值</th>
                <td><input v-validation="{required: true, query: 'WINDWARN', numberDot: true}" v-model="WINDWARN"></td>
              </tr>
              <tr>
                <th>报警值</th>
                <td><input v-validation="{required: true, query: 'WINDALARM', numberDot: true}" v-model="WINDALARM"></td>
              </tr>
            </table>
          </div>
        </div>
      </div>
    </div>
  </zz-dialog>
</template>
<script>
import { mapGetters } from 'vuex'
import { getThresholdList, setThreshold } from '@/service/api.js'
export default {
  name: 'set',
  computed: {
      ...mapGetters({
        currentUser: 'currentUser'
      })
    },
    props: {
      showDialog: {
        type: Boolean,
        default: false
      }
    },
    watch: {
      showDialog (value) {
        if (value) {
          this.getThresholdListQuery()
        }
      }
    },
    data () {
      return {
        threshold: {},
        groupParamList: [],
        PMTWOPOINTFIVEWARN: '',
        PMTWOPOINTFIVEALARM: '',
        PMTENWARN: '',
        PMTENALARM: '',
        TEPWARN: '',
        TEPALARM: '',
        TSPWARN: '',
        TSPALARM: '',
        NOISEWARN: '',
        NOISEDAYALARM: '',
        NOISENIGHTALARM: '',
        WINDWARN: '',
        WINDALARM: ''
      }
    },
    methods: {
      getThresholdListQuery () {
        return new Promise(resolve => {
          getThresholdList({
            projectId: this.currentUser.pjId
          }).then( res => {
            this.threshold = res.data
            this.PMTWOPOINTFIVEWARN = res.data.PMTWOPOINTFIVEWARN
            this.PMTWOPOINTFIVEALARM = res.data.PMTWOPOINTFIVEALARM
            this.PMTENWARN = res.data.PMTENWARN
            this.PMTENALARM = res.data.PMTENALARM
            this.TSPWARN = res.data.TSPWARN
            this.TSPALARM = res.data.TSPALARM
            this.NOISEWARN = res.data.NOISEWARN
            this.TEPALARM = res.data.TEPALARM
            this.TEPWARN = res.data.TEPWARN
            this.NOISEDAYALARM = res.data.NOISEDAYALARM
            this.NOISENIGHTALARM = res.data.NOISENIGHTALARM
            this.WINDWARN = res.data.WINDWARN
            this.WINDALARM = res.data.WINDALARM
            resolve()
          }).catch( err => {
            console.log(err)
          })
        })
      },
      submit () {
        this.groupParamList = []
        this.$vaildation(this).then(() => {
          for (let key in this.threshold) {
            this.groupParamList.push({
              groupParamValue: this[key],
              groupParamCode: `${key}`
            })
          }
          let data = {
            projectId: this.currentUser.pjId,// 登录人id
            groupParamList: this.groupParamList
          }
          this.$axios({
            method: 'post',
            url: `${this.$site.videoServer}/api/environmentMonitor/setThreshold`,
            headers: {
              post: {
                'Content-Type': 'application/json;charset=UTF-8'
              }
            },
            data: data
          }).then(res => {
             if (res.data.errorMsg) {
               this.$message.error(res.data.errorMsg)
             } else {
               this.$message.success('修改成功了')
               this.close()
             }
          }).catch(() => {
            this.$message.error('出错了')
          })
        })
      },
      close () {
        this.$emit('close')
      }
    }
}
</script>

<style lang="scss" scoped>
.dialog-box {
  .item-box {
    table {
      width: 100%;
      border-spacing: 0;
      border-collapse: collapse;
      margin-bottom: 10px;
      th {
        width: 30%;
        text-align: center;
        background: #eff0f2;
        color: #989898;
        padding: 8px;
      }
      td {
        text-align: left;
        padding-left: 10px;
        input {
          width: 80%;
          border: none;
        }
      }
      th, td {
        border: 1px solid #e6e6e6;
      }
    }
  }
  .title {
    color: $color;
    font-size: 14px;
    padding: 5px;
    border-left: 3px solid $color;
    margin-bottom: 5px;
  }
}
</style>

